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2007 Microsoft Office System User Interface Design Guidelines Preview 


This document supports a preliminary release of a software product that may be changed substantially 
prior to final commercial release. This document is provided for informational purposes only and 
Microsoft makes no warranties, either express or implied, in this document. Information in this 
document, including URL and other Internet Web site references, is subject to change without notice. 


The entire risk of the use or the results from the use of this document remains with the user. Complying 
with all applicable copyright laws is the responsibility of the user. Without limiting the rights under 
copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, 
or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or 
otherwise), or for any purpose, without the express written permission of Microsoft Corporation. 


Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property 
rights covering subject matter in this document. Except as expressly provided in any written license 
agreement from Microsoft, the furnishing of this document does not give you any license to these 
patents, trademarks, copyrights, or other intellectual property. To license the full 2007 Microsoft Office 

User Interface Design Guidelines please visit http: 


msdn.microsoft.com/officeui. 


© 2006 Microsoft Corporation. All rights reserved. 


Microsoft, MS-DOS, Windows, Windows NT, Windows Server, ActiveX, Excel, FrontPage, InfoPath, 
IntelliSense, JScript, OneNote, Outlook, PivotChart, PivotTable, PowerPoint, SharePoint, ShapeSheet, 
Visual Basic, Visual C++, Visual C#, Visual Studio, Visual Web Developer, Visio are either registered 
trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. 


All other trademarks are property of their respective owners. 
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RIBBON RESIZING 


The layout of controls in the Ribbon changes when the width of the application window changes. When 
displayed on a large monitor, the Ribbon will adjust to show the "large versions" of groups in the 
Ribbon. When displayed on a small monitor, or when the user chooses to manually reduce the size of 
the application window, the Ribbon will adjust to show the "small versions" of groups in the Ribbon. 

The Ribbon is not designed for a particular display resolution. The Ribbon simply provides the best 
arrangement of the controls for the application and displays that arrangement appropriately for every 
possible size of the application window. 


The figure below illustrates how the layouts of controls on Microsoft Word's Insert Tab change when the 
application window is horizontally resized. Note that some controls change from being displayed as 
large controls to being displayed as small controls when the Ribbon is narrower. Also note that some 
text labels for controls are removed from the Ribbon when the Ribbon is narrower. 
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DEFINING GROUPS FOR RIBBON RESIZING 


Resizing the width of the application window MUST change the layout of controls on the Ribbon. 


1. 


2. The layout of controls on the Ribbon MUST change in real-time when the application window is 

resized by dragging with the mouse. The change in the layout of controls on the Ribbon MUST 
NOT be delayed until after the application window has been resized and the left mouse button is 
released. 
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Changing the layout of the controls on the Ribbon MUST be achieved by substituting variants for 
each group that differ in width. (Note in the figure below two different variants for the 
Illustrations group that use a different layout for the controls and vary in width.) 


3. 
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4. Each variant MUST have a unique layout for the controls in the group 


5. Each variant MUST contain all of the controls for the group. Controls MUST NOT be added or 

deleted from different variants of the same group. 


Groups MUST have at least two predefined variants, "Large" and "Collapsed." (NOTE: in the 
figure below the large and collapsed group variants for the Illustrations group.) 
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Groups SHOULD have three - four predefined variants to provide a smooth transition between 
group variants when the application window is horizontally resized. The four predefined 
variants for the Illustrations group are shown in the table below. (Note how the layout of 
controls for each variant changes to produce variants of different widths.) 
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a 






□□ TJ 


Shapes SmartArt Chart 


re 


ip 


-rt 


Illustrations 


Medium. The first two controls are displayed 
using large Icons. The last three controls are 
displayed using small icons (16x16 pixels at 96 dpt) 
and are stacked vertically to decrease the width of 
the group. 
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Small. The first two controls are displayed using 
large icons. The last three controls are displayed 
using small icons, but the text labels have been 
dropped to decrease the width of the group. 
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Collapsed. The group is collapsed into one item 
that displays the group text label, "Illustrations.' 
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COLLAPSED GROUP BEHAVIOR 


1. Collapsed groups MUST use the same text string as the group Label 


Clicking a collapsed group MUST display the largest variant for that group below the Ribbon if 
the group does not contain an in-Ribbon gallery. For groups that contain an in-Ribbon gallery, 
the smallest variant for that group MUST be displayed below the Ribbon. (Note in the figure 
below the collapsed "Page Setup" group is displayed below the Ribbon.) 


2 . 
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3. All controls MUST behave in the same way when they are displayed below the Ribbon from a 

collapsed group as they do when they are displayed on the Ribbon. 


4. Collapsed groups displayed below the Ribbon MUST immediately disappear after a control 

within it is chosen. 


5. Collapsed groups displayed below the Ribbon MUST immediately disappear if the user clicks 

anywhere outside the group. 


Clicking outside a collapsed group displayed below the Ribbon MUST NOT dismiss or clear the 
current selection of objects or text in the document. 


6 . 
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For controls that require user input, like spinner controls and combo boxes, the group MUST 
remain displayed below the Ribbon until the user types ENTER on the keyboard or clicks 
anywhere outside the group. (Note in the figure below that the collapsed group remains 
displayed while the user has text selection in the combo box for Indent Left.) 
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DEFINING GROUP COMBINATIONS FOR RIBBON RESIZING 


Each tab in the Ribbon MUST have several predefined combinations of group variants for a 
sample of several possible application window widths. The table below provides a summary of 
the fifteen predefined group variant combinations for the Insert tab in Microsoft Word. 


1 . 


Group Variants (Large, Medium, Small, Collapsed) 
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When the application window is horizontally resized, the combination of variants that allows the 
greatest number of groups to be at their largest variants MUST be displayed. 


2 . 


If the width of the application window is too large for a combination of group variants to fill the 
entire Ribbon, then the groups MUST be left aligned in the Ribbon with any remaining empty 
space displayed on the right. (Note in the figure below empty space is displayed on the right side 
of the Ribbon, since there is not enough room to display one of the groups at their next larger 
size.) 
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The width of each group MUST be determined by the width of the controls within the group. 
The width of each group MUST NOT be determined by the length of the group label. 


4. 


If the length of the group label is wider than the width of the controls within the group, then the 
group label MUST be truncated to provide more available space on the Ribbon for other groups 
to display larger variants. For this reason, the length of group labels MUST be kept short. (Note 
in the figure below the Table of Authorities group label is truncated because the group label is 
wider than the controls within the Group.) 
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If empty space is available on the right side of the Ribbon, then the width of the group SHOULD 
automatically increase so that the group label is no longer truncated. The group label and 
controls SHOULD be horizontally centered when this action occurs. (Note in the figure below the 
width of the group has been expanded and the group label is no longer truncated since 
additional empty space was available on the right side of the Ribbon. Also note that the controls 
within the group are horizontally centered.) 
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A horizontal scroll button MUST be displayed when the width of the application window is too 
small to display the groups at their smallest variant size. (Note in the figure below the horizontal 
scroll arrow on the right side of the Ribbon.) 
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The horizontal scroll button MUST first appear on the right edge of the Ribbon and the right side 
of the Ribbon MUST be cropped. 


8 . 


Hovering over the horizontal scroll button MUST NOT cause the Ribbon to scroll. 


9. 
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10. Clicking the horizontal scroll button MUST page (not scroll) the Ribbon to the left. When the tab 

is paged all the way to the right, the horizontal scroll arrow MUST be displayed on the left side 
of the Ribbon. (Note in the figure below the left side of the Ribbon is now cropped after clicking 
the horizontal scroll button.) 
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Symbols 
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11. The scrolled state for each tab MUST be independent of the scroll state for other tabs in the 

Ribbon. 


12. The scrolled state MUST be remembered per tab. Navigating from tab A to tab B, and then back 

to tab A, MUST NOT discard the scrolled position for tab A, regardless of how much scrolling was 
performed on tab B when it was displayed. Resizing the application window SHOULD discard all 
scrolling position persistence. 


13. The entire Ribbon SHOULD completely disappear when the application window is less than 300 

pixels wide and 250 pixels tall to provide more space for displaying the document. 


14. The tabs MUST compress to fit the available space when the application window is horizontally 

resized using the rules outlined in the table below. 


Gradually remove empty space to the right of the tabs 


Step 1 


Gradually and uniformly remove the padding from both sides of all the tabs until the 
minimum padding required for displaying the tab selection and hover states is reached. 


Step 2 


Add separator lines between tabs to assist readability. 


Step 3 


Reduce the width of the tab with the longest name by truncating the text label. 
Continue reducing the width of the largest tab (or tabs in the case of ties) until all tabs 
are the same width. Tooltips MUST display the complete names of any tab whose text 
label is truncated. (NOTE: The minimum padding required for displaying the tab 
selection and hover states MUST be maintained.) 


Step 4 


Reduce the width of all core tabs equally down to a minimum of about three characters. 
(NOTE: Contextual tab names SHOULD NOT be truncated until Step 6 below.) 


Step 5 


Display a horizontal scroll button. 


Step 6 
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Reduce the width of all core tabs equally down to a minimum of about three characters. (NOTE: Contextual tab names SHOULD not be 
truncated until Step 6 below.) 
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Step 5 
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Step 6 
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Display a horizontal scroll button. 
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2007 Microsoft Office System User Interface Design Guidelines Preview 


BEST PRACTICES FOR RIBBON RESIZING 


Every group that contains more than one control SHOULD have a collapsed group variant 
defined as its smallest size variant. 


1 . 


Groups that contain less frequently used controls SHOULD be displayed smaller before groups 
that contain more frequently used controls. 


2 . 


Groups that contain controls with 16x16 icons that are better known to users SHOULD lose 
labels before lesser known controls when defining how the Ribbon will be resized. 


3. 
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